<template>
    <div class="theater">
    <h1>剧院</h1>
    <div class="teacher_con"  v-for="(item,index) in theaterList" :key='index'>
        <div v-if='item.showList.length>0' class="title_con">
            <div  @click="urlFn()" class="title_cons">
                 <div class="title_img">
                <img :src="item.pic" alt="">
            </div>
            <div class="titles">
                <h2>{{item.name}}</h2>
                <p>{{item.count}}场在售演出</p>
            </div>
            </div>
           
            <span>...</span>
        </div>
        <div v-if='item.showList.length>0' class="swiper-container">
            <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(value,ind) in item.showList" :key='ind'>
                <div class="listp">{{value.show_time}}<div class="clll"></div></div> 
                <div class="th_img">
                    <img :src="value.pic" alt="">
                </div>
              
            </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          
        </div>
    </div>
    </div>
</template>

<script>
import {getTheaterList} from '../api/request'
import {mapState} from 'vuex'
import {THEATER_DATA} from '../store/types'
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
    data () {
        return {
        }
    },
    computed:{
        ...mapState('theater',['theaterList'])
    },
    mounted () {
         this.$store.dispatch('main/setShowBtoNav',true)
        this.$store.dispatch(THEATER_DATA).then(ret=>{
            var mySwiper = new Swiper('.swiper-container', {
                slidesPerView: 3,
                observer: true, //监听，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
                pagination: {
                    el: ".swiper-pagination"
                }
            })
        })
    },
    // 编程式导航跳转 thx
    methods:{
        urlFn(){
            this.$router.push({
                path:"/show"
            })
        }
    }
}
</script>

<style lang='scss' scoped>
    .theater{
        margin:0 .1rem;
        border: .01rem solid #999;
        h1{
            height: .5rem;
            width: 100%;
            text-align: center;
            line-height: .5rem;
            border-bottom: .01rem solid #999;
        }
        .teacher_con{
            margin: .2rem;
            padding:.3rem .1rem;
            box-shadow: .01rem .01rem .05rem .05rem #eeeeee;
            .title_con{
                height: .85rem;
                display: flex;
                justify-content: space-between;
                width: 100%;
                .title_cons{
                    display: flex;
                }
                .title_img{
                    width: .8rem;
                    height: .8rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .titles{
                    margin-left: .2rem;
                    line-height: .3rem;
                }
                span{
                    // margin-left: 3.4rem;
                    // float: right;
                    font-size: .5rem;
                }
            }
            .swiper_na{
                padding:.2rem;
            }
            .swiper-container {
                width: 100%;
                // height: 2.8rem;
                // background: rebeccapurple;
                .listp{
                    font-size: .2rem;
                    text-align: center;
                    border-bottom: .02rem solid #aaa;
                    color: #aaa;
                    position: relative;
                    margin-bottom: .3rem;
                    line-height: .5rem;
                }
                .clll{
                    width: .2rem;
                    height: .2rem;
                    border-radius: 100%;
                    background: #aaa;
                    bottom: 0;
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%, 50%);
                }
                .th_img{
                    width: 100%;
                    height: 3rem;
                    padding: .05rem;
                }
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        
    }
</style>
